<template>
	<section>
		<back :title="'添加新资产'" type='2'><img src="../../static/img/magnifier.png" style="position: absolute;right: 0.15rem;left: auto;" /></back>
		<p style="height: 0.5rem;"></p>
		<article>
			<div class="currencySigle">
				<img src="../../static/img/ic1.png" />
				<span class="currencySigleSpan1">
					<p>EHT</p>
					<p>Ethereum Foundation</p>
					<p>0x000000.000</p>
				</span>
				<span class="switchSpan">
					<p><label @click="change(0)" :class="{'ckCs':toRightAy[0].val}"></label></p>
				</span>
			</div>
			<div class="currencySigle">
				<img src="../../static/img/ic2.png" />
				<span class="currencySigleSpan1">
					<p>DGD</p>
					<p>Digix DAO</p>
					<p>0xe0b792...645f0e2a</p>
				</span>
				<span class="switchSpan">
					<p><label @click="change(1)" :class="{'ckCs':toRightAy[1].val}"></label></p>
				</span>
			</div>
			<div class="currencySigle">
				<img src="../../static/img/ic3.png" />
				<span class="currencySigleSpan1">
					<p>MKR</p>
					<p>Maker Dao</p>
					<p>0x9f8f72...c3a579a2</p>
				</span>
				<span class="switchSpan">
					<p><label @click="change(2)" :class="{'ckCs':toRightAy[2].val}"></label></p>
				</span>
			</div>
		</article>
	</section>
</template>

<script>
	//	import { homeGet } from '../common/comfn';
	import back from '../com/back.vue';
	export default {
		data() {
			return {
				toRightAy: [{
					val: false
				}, {
					val: false
				}, {
					val: false
				}]
			}
		},
		components: {
			back
		},
		methods: {
			change: function(index) {
				this.toRightAy[index].val = !this.toRightAy[index].val;
			}
		},
		created: function() {},
		mounted: function() {}
	}
</script>

<style scoped="scoped">
	article {
		padding-left: 0.1rem;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	
	.currencySigle {
		margin-top: 0.1rem;
		border-bottom: 1px solid #E8E8E8;
		height: 0.6rem;
	}
	
	article div:last-child {
		border: none;
	}
	
	.currencySigle img,
	.currencySigle span {
		display: inline-block;
		height: 0.46rem;
		vertical-align: middle;
	}
	
	.currencySigle img {
		margin-left: 0.1rem;
		border-radius: 0.46rem;
		margin-right: 0.1rem;
	}
	
	.currencySigleSpan1 p:nth-child(n+2) {
		font-size: 0.1rem;
		color: rgb(151, 151, 151);
		margin-top: 0.02rem;
	}
	
	.currencySigleSpan1 p:nth-child(3) {
		font-size: 0.1rem;
		color: rgb(199, 205, 209);
	}
	
	.currencySigle span:nth-child(3) {
		float: right;
		margin-right: 0.15rem;
	}
	
	.switchSpan p {
		background-color: rgb(136, 104, 85);
		height: 0.14rem;
		border-radius: 0.14rem;
		width: 0.26rem;
		position: relative;
		margin-top: 0.12rem;
	}
	
	.switchSpan p label {
		position: absolute;
		display: inline-block;
		width: 0.22rem;
		height: 0.22rem;
		border-radius: 0.2rem;
		left: -0.1rem;
		background-color: whitesmoke;
		top: 50%;
		margin-top: -0.11rem;
		transition: all 0.5s;
	}
	
	.ckCs {
		left: 0.14rem !important;
		background-color: rgb(158, 129, 104) !important;
	}
</style>